<template>
    <a-spin :spinning="spinning">
        <div class="mainS">
            <div class="mainSt">病例分析</div>
            <div class="mainSts" v-if="orgId">
                <span>科室：</span>
                <a-select size="small" v-model="dept" placeholder="请选择科室" style="width: 120px;" @change="getData1">
                    <a-select-option :value="i.id" v-for="(i, o) in deptList" :key="o">{{ i.deptName
                    }}</a-select-option>
                </a-select>
            </div>
            <div class="mainC" ref="CaseRef"></div>
        </div>
    </a-spin>
</template>

<script>
import { httpAction, getAction, getFileAccessHttpUrl } from '@/api/manage'
export default {
    props: ['isAdmin', 'date', 'orgId'],
    data() {
        return {
            CaseRef: null,
            spinning: false,
            deptList: [],
            dept: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.CaseRef = this.$echarts.init(this.$refs.CaseRef);
        });
    },
    watch: {
        orgId: {
            handler(val) {
                getAction('/wz/hosp/wzHospDept/list', { pageNo: 1, pageSize: 999, orgId: this.orgId || null }).then(res => {
                    res.result.records.unshift({ id: null, deptName: '全部' })
                    this.deptList = res.result.records;
                    this.dept = '1896206275616702465'
                    this.getData();
                })
            },
            immediate: true,
            deep: true,
        },
        date: {
            handler(val) {
                this.getData();
            },
            immediate: true,
            deep: true,
        }
    },
    methods: {
        getData1() {
            this.getData();
        },
        getData() {
            const that = this;
            this.spinning = true;
            if (!this.dept) {
                getAction('/wz/statistics/findMedicalPie', { dateType: this.date, orgId: this.orgId || null, deptId: this.dept || null }).then(res => {
                    that.pieInit(res.result)
                })
            } else {
                getAction('/wz/statistics/findMedical', { dateType: that.date, orgId: that.orgId || null, deptId: this.dept || null }).then(res => {
                    that.lineInit(res.result)
                })
            }

        },
        pieInit(data) {
            let _data = []
            data.map(i => {
                _data.push(
                    { value: i.valueInfo, name: i.keyInfo }
                )
            })
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    bottom: 0,
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 6,
                    icon: 'circle',
                    textStyle: {
                        color: '#004236',
                        fontSize: 13,
                    },
                    pageIconColor: '#004236',
                    pageIconInactiveColor: '#888',
                    left: 0,
                    pageTextStyle: {
                        color: '#004236',
                        fontSize: 13,
                    }
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                series: [
                    {
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 种';
                            }
                        },
                        type: 'pie',
                        radius: ['50%', '80%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: _data
                    }
                ]
            };
            this.CaseRef.clear()
            this.CaseRef.setOption(option)
            this.spinning = false
        },
        lineInit(data) {
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '15%',
                    left: '1%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.xdata,
                    axisLine: {
                        lineStyle: {
                            color: "#004236",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#004236",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        align: 'center',
                        color: '#004236',
                        fontSize: 13,
                    },
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#004236",
                        fontSize: 14,
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#004236",

                        }
                    },
                    axisLabel: {
                        color: '#004236'
                    },
                    axisLabel: {
                        formatter: '{value} 例',
                        color: '#004236'
                    }
                },
                series: [{
                    barWidth: '10',
                    type: 'bar',
                    itemStyle: {
                        barBorderRadius: [10, 10, 0, 0],
                        color: new this.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#077762cc' },
                                { offset: 1, color: '#07776233' }
                            ]
                        )
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 例';
                        }
                    },
                    data: data.ydata
                },
                ]
            };

            this.CaseRef.clear()
            this.CaseRef.setOption(option)
            this.spinning = false
        }

    },

}
</script>

<style lang="less" scoped>
.mainS {
    width: 25vw;
    height: 334px;
    border-radius: 12px;
    padding: 15px 30px;
    background-color: #ffffffcc;
    box-shadow: 0 0 12px #ccc;
    position: relative;
    margin-right: 30px;

    .mainSts {
        width: 220px;
        color: #fff;
        height: 36px;
        display: flex;
        font-size: 16px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 12px #00423688;
        background: #077762;
        border-radius: 12px;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .mainSt {
        font-size: 20px;
        color: #004236;
        letter-spacing: 5px;
        width: 100%;
        height: 36px;
        line-height: 36px;
        display: flex;
        align-items: center;

        &::before {
            margin-left: -10px;
            margin-right: 10px;
            content: '';
            width: 6px;
            height: 30px;
            background: #077762;
            border-radius: 3px;
            display: inline-block;
        }
    }

    .mainC {
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: space-around;

    }
}
</style>